import { Button, Form, Input, Modal } from "antd";
import action from "@/store/action";
import { useDispatch, useSelector } from "react-redux";
import { useMyContext } from "@/hooks";
import { api } from "@/api";
import { setToken } from "@/utils/auth";

const LoginModal = () => {
  const { loginFlag } = useSelector((state) => state.app);
  const dispath = useDispatch();
  const [formIns] = Form.useForm();
  const { messageApi } = useMyContext();

  //处理登录方法
  const handleLogin = async () => {
    try {
      //只有校验通过了才会返回表单值
      const { password, username } = await formIns.validateFields();

      const doLogin = async (username, password) => {
        const res = await api.login({ username, password });
        if (+res.code === 0) {
          messageApi.success("登录成功！");
          setToken(res.data.token);
          //恢复表单初始化数据
          formIns.setFieldsValue({
            username: "",
            password: "",
          });
          //加载用户信息
          await dispath(action.user.getUserInfo());
          //登录成功关闭登录窗口
          dispath(action.app.setLoginFlag(false));
        } else {
          //登录出错
          messageApi.error(res.message);
          formIns.resetFields();
        }
      };

      if (JSON.parse(process.env.REACT_APP_USE_CAPTCHA)) {
        //滑块验证
      } else {
        doLogin(username, password);
      }
    } catch (error) {
      messageApi.error("请输入正确的用户名和密码!");
    }
  };

  return (
    <>
      <Modal
        title="登录"
        open={loginFlag}
        footer={() => {
          return (
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Button
                type="link"
                style={{ color: "#000" }}
                onClick={() => {
                  dispath(action.app.setLoginFlag(false));
                  dispath(action.app.setRegisterFlag(true));
                }}
              >
                立即注册
              </Button>
              <Button type="link">忘记密码</Button>
            </div>
          );
        }}
        onCancel={() => dispath(action.app.setLoginFlag(false))}
        width={460}
        centered
      >
        <Form
          form={formIns}
          name="normal_login"
          className="login-form"
          colon={false}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              className="login-form-button"
              onClick={handleLogin}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default LoginModal;
